<template>
	<view>
		<view class="headerCon">
			<!-- <u-field v-model="search.name" label="客户姓名:" placeholder="请输入客户姓名">
				<view slot="right" class="flex">
					<u-button size="mini" type="success" @click="searchClick">搜索</u-button>
				</view>
			</u-field> -->
			<view class="goBtn" @click="goToDetail({})">发起</view>
		</view>
		<view class="contentCon bottom-border">
		  <u-cell-item class="clearLine" v-for="item in list" :key="item.id" 
			  :arrow="false" >
			<view class="contentBox">
			<view class="nav" @click="toDetailDisabling(item.orderNumber)">
				<view class="title">
				<view>{{ item.orderNumber }}</view>
			  </view>
			  <view class="body">
                    <view slot="left-icon">
                          <view style="text-align: left;">{{ item.contact }}</view>
                          <view style="text-align: left;">{{ item.phone }}</view>
						  <view style="text-align: left;">{{ item.address }}</view>
                    </view>
                    <view slot="right-icon" >
                          <view >{{ item.deal_1 | appointOrderStatusFilter }}</view>
                          <view>{{ item.isGenerate == 1 ? '已生成工单' : '未生成工单' }}</view>
                          <view class="u-line-1">
                               <text>{{ item.bookDate }}</text>
                          </view>
                     </view>
			   </view>
			   <view v-if="item.zt==3" class="cancelReason">
			   		 <view>
			   			取消原因：{{item.returnReason}}
			   		 </view>
			   </view>
			</view>
			<view class="foot">
				<view v-if="item.zt==0" class="footleft"
				@click="toDetailDraft(item.orderNumber)">
				编辑
				</view>
				<view v-if="item.zt==0" class="footright"
				@click="todeleteDetailDraft(item.id)">
					取消
				</view>
				<view class="footlook" v-else-if="item.zt==1" 
				@click="toDetailDisabling(item.orderNumber)"
				 >
					查看
				</view>
			</view>
			</view>
		  </u-cell-item>
		 
		<u-empty :show="listLength == 0" mode="data"></u-empty>
	    </view>
		
	<u-back-top :scroll-top="scrollTop"></u-back-top>
	</view>
</template>

<script>
import { mapMutations, mapActions } from 'vuex';
import { _appointPrePrice,deleteListAppointOrder } from '../../api/agent.js';
export default {
	data() {
		return {
			search: {
				name: '',
				orderNumber: ''
			},
			id:'',
			No:'',
			delete:'',
			scrollTop: 0,
			pageIndex: 1,
			pageSize: 10,
			total: 0,
			list: [],
			canLoad: true,
		};
	},
	computed: {
		listLength() {
			return this.list.length;
		},
		
	},
	onShow() {
		this.resetData();
		this.getList();
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},
	onLoad: function (options) {
	     setTimeout(function () {
	         console.log('start pulldown');
	     }, 1000);
	       uni.startPullDownRefresh();
		   // this.getList()
	},
    onPullDownRefresh() {
		console.log('refresh');
		 setTimeout(function () {
		     uni.stopPullDownRefresh();
		 }, 1000);
	},
	onReachBottom() {
		this.getList();
	},
	methods: {
		...mapActions({
			getAppointList: 'agent/getAppointList'
		}),
		...mapMutations({
			setPreStartDetail: 'workOrder/setPreStartDetail',
		}),
		resetData() {
			this.list = [];
			this.pageIndex = 1;
			this.canLoad = true;
		},
		getList() {
			if (!this.canLoad) return;
			this.getAppointList({
				limit: 10,
				page: this.pageIndex,
				search: this.search.orderNumber
			})
				.then(res => {
					console.log(res);
					if (res && res.code == 0) {
						console.log(res);
						let list = res.data.list;
						list.forEach(e => {
							if (e.photo) {
								let arr = e.photo.split(';');
								arr.forEach((e2, i) => {
									arr[i] = `${process.env.VUE_APP_ATH_URL}/${e2}`;
								});
								e.photo = arr;
							} 
						});
						this.list = [...this.list, ...list];
						this.total = res.data.totalRow;
						this.pageIndex = this.pageIndex + 1;
						if (res.data.lastPage) {
							console.log(res.data.lastPage)
							this.canLoad = false;
						}
					}
				})
				.catch(err => {
					console.log(err);
				});
		},
		
		// 发起
		goToDetail(e) {
			this.setPreStartDetail(e);
			uni.navigateTo({
				url: '/agentPages/agent/preStartOrderDetail'
			});
			
		},
		//点击空白
		toDetailDisabling(orderNumber) {
			console.log(orderNumber)
			uni.navigateTo({
				url: '/agentPages/agent/preStartOrderDetailDisabling?orderNumber='+orderNumber
			});
			
		},
		// 点击编辑
		toDetailDraft(orderNumber) {
			console.log(orderNumber)
			uni.navigateTo({
				url: '/agentPages/agent/preStartOrderDetailDraft?orderNumber='+orderNumber
			});
			
		}, 
		
		// 删除
		todeleteDetailDraft(id){
			console.log(id);
			var that = this;
				uni.showModal({
				title:'提示',
				content:"确认取消订单？",
				success:function(res){
					console.log(res)
				if(res.confirm){
					deleteListAppointOrder(id).then((res)=>{
						that.getList();
							uni.showToast({
								mask: true,
								title: '取消成功请下拉刷新页面',
								icon: 'none'
							});
						 console.log(that.list)
						// let list = res.data.list;
						// list.splice(index,1);
						// that.list=list;
						
					})
					 console.log(that.list)
					// this.$forceUpdate()
				}else if(res.cancel){
					console.log(用户点击取消);
					}
				 },
				
				 })
				 
		},
	},
};
</script>

<style lang="less">
.contentCon {
	min-height: calc(100vh - 120rpx);
	background-image: linear-gradient(#f4f4f5, #fff);
}
.buttonColor{
	// $u-type-primary-dark: #2b85e4;
}
.clearLine{
	border: 0 !important;
	.contentBox {
		background-color:#fff;
		color: black;
		border-radius: 10rpx;
		// box-shadow: 1px 1px 2px 2px rgba(0, 0, 0, 0.1);
		padding:40rpx 40rpx 0rpx 40rpx;
		border: 0 !important;
		.nav{
			.title{
				// padding: 0rpx 50rpx ;
				text-align: left;
				color: #a87f3f;
			}
			.body{
				margin-top: 20rpx;
				// padding-left: 50rpx;
				// padding-right: 50rpx;
				display: flex;
				justify-content: space-between;
				color: #999;
				.left-icon{
					width: 50%rpx;
					text-align: left;
				}
				.right-icon{
					width: 50%rpx;;
					text-align: right;
				}
			}
			.cancelReason{
				margin-top: 10rpx;
				padding-left: 50rpx;
				padding-right: 50rpx;
				// 超出文本换行
				text-align: justify;
				text-justify: newspaper;
				word-break: break-all;
			}
		}
		
		.foot{
			margin-top: 20rpx;
			padding-top: 10rpx;
			height: 90rpx;
			align-items: center;
			justify-content: center;
			display: flex;
			color: #999;
			justify-content: space-between;
			.footleft{
				border-radius: 8rpx;
				text-align: center;
				margin-left: 110rpx;
				width:180rpx;
				height: 65rpx;
				line-height: 2.2;
				margin-bottom: 30rpx;
				background-color:#a87f3f;
				color: #fff;
				text-align: center;
			}
			.footright{
				border-radius: 8rpx;
				text-align: center;
				margin-right: 110rpx;
				width:180rpx;
				height: 65rpx;
				line-height: 2.2;
				margin-bottom: 30rpx;
				background-color:#e6e6e6;
				color: #a87f3f;
				text-align: center;
			}
			.footlook{
				border-radius: 8rpx;
				text-align: center;
				margin-left: 225rpx;
				width:180rpx;
				height: 65rpx;
				line-height: 2.2;
				margin-bottom: 30rpx;
				background-color:#a87f3f;
				color: #fff;
			}
		}
	}
}
.headerCon {
	text-align: center;
	width: 500rpx;
	margin: 0 auto;
	padding: 24rpx 140rpx;
	// background-image: linear-gradient(#007aff, #e4e7ed);
	background-color: #fff;
	.goBtn{
		width: 255rpx;
		height: 75rpx;
		line-height: 2.3;
		border-radius: 8rpx;
		background-color: #000000;
		color: #fff;
	}
	 
}

</style>
